<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<hello-component></hello-component>
		</div>

		<!-- 2.2、定义组件 -->
		<template id="helloTemplate">
			<div>
				{{message}}<br>
				{{message}}<br>
				{{message}}<br>
				{{message}}<br>
				{{message}}<br>
			</div>
		</template>

		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>


		<script type="text/javascript">
			
			//2、定义组件的实体
			let hello = {
				//2.1、定义组件的数据
				data: function(){
					return{
						message: "zhangsan"
					}
				},
				//2.2、定义组件的模板
				template: "#helloTemplate",
				//2.3、定义组件的方法
				methods: {}
			}
			
			const vue = new Vue({
				el: "#app",
				data: {},
				methods: {},
				mounted() {
					
				},
				//1、定义局部组件们
				components: {
					/**
					 * 格式：
					 * 	key（局部组价的id） value（对应的组件实体）
					 */
					helloComponent: hello
				}
			})
		</script>

	</body>
</html>
